<template>
  <div class="commentIndex">
    <div class="container">
      <div class="logo">
        <a class="title">
          全面风险管理系统
        </a>
        <p class="systemHeadline">
          <img src="../../static/images/commentHeadline.png" alt="">
        </p>
      </div>
    </div>
    <div class="colum-list">
      <div class="catalogList2 container">
        <p class="breadClumn">
          <span>当前位置：</span>
          <router-link :to="{path:'/pageIndex'}">
            <a class="bread1">
              首页 >
            </a>
          </router-link>
          <a class="bread2">内控评价</a>
        </p>
      </div>
      <div class="commentUl">
          <div class="container">
            <ul  >
              <li>
                <router-link :to="{path:'/plan'}">
                  <div class="commentList">
                    <span>评价计划</span>
                  </div>
                </router-link>
              </li>
              <li>
                <router-link :to="{path:'/progressTest'}">
                  <div class="commentList">
                    <span>流程测试</span>
                  </div>
                </router-link>
              </li>
              <li >
                <router-link :to="{path:'/sample'}">
                  <div class="commentList">
                    <span>样本为0确认</span>
                  </div>
                </router-link>
              </li>

            </ul>
            <ul  >
              <li>
                <router-link :to="{path:'/defectFixed'}">
                  <div class="commentList">
                    <span>缺陷整改</span>
                  </div>
                </router-link>
              </li>
              <li>
                <div class="commentManagement commentList">
                  <span>内控定量评价</span>
                </div>
                <div class="hoverShow">
                  <div style="width: 50%;">
                    <router-link :to="{path:'/quantitativeEvaluation'}">
                      <span>定量评价</span>
                    </router-link>
                  </div>
                  <div style="width: 50%;">
                    <router-link :to="{path:'/quotaManagement'}">
                      <span>内控指标</span>
                    </router-link>
                  </div>
                </div>

              </li>
              <li>
                <div class="commentManagement commentList">
                  <span>评价管理</span>
                </div>
                <div class="hoverShow">
                  <div>
                    <router-link :to="{path:'/editEvaluation'}">
                      <span>编辑</span>
                    </router-link>
                  </div>
                  <div>
                    <router-link :to="{path:'/examineEvaluation'}">
                      <span>审核</span>
                    </router-link>
                  </div>
                  <div>
                    <router-link :to="{path:'/evaluationManagement'}">
                      <span>管理</span>
                    </router-link>
                  </div>
                </div>
              </li>
            </ul>
          </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default({
    data(){
        return {

        }
    },

  })
</script>

<style scoped="">
  body,html{
    width: 100%;
    height: 100%;
  }
  #app{
    height: 100% !important;
    width: 100%;
  }
  .commentIndex{
    width: 100%;
    height: 100%;
    background: #e9ece5;
    overflow: hidden;
    background-image: url("../../static/images/otherBanner.jpg");
    background-repeat: no-repeat;
    background-position: center;

  }

  .commentIndex .commentUl{
    background: rgba(196,220,168,0.4);
  }

  .commentIndex  .breadClumn{
    padding-top: 40px;
    padding-bottom: 20px;
    color: #508018;
  }
  .commentIndex .commentUl .container{
    padding: 20px 0;
  }
  .commentIndex .commentUl ul{
    font-size: 0;
  }
  .commentIndex .colum-list .catalog{
    width: 310px;
    height: 373px;
    background: #ffffff;
    position: relative;
    padding-top: 7px;
    border-top-right-radius: 12px;
  }
  .commentIndex .colum-list .catalog:before{
    position: absolute;
    content: '';
    left: 0;
    top:0;
    width: 100%;
    height:7px;
    background-image: url("../../static/images/category1Line.png");
    background-repeat: no-repeat;

  }
  .commentIndex .colum-list .catalog  div{
    position: absolute;
    left: 0;
    top:0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 150px;
    height: 150px;
    font-size: 26px;
    color: #666666;
    text-align: center;
  }
  .commentIndex .colum-list .catalog  div img{
    margin-bottom: 20px;
  }
  .commentIndex .catalogList2{
    padding: 1px 0;
    position: relative;
  }
  .commentIndex .catalogList2 .breadClumn{

  }
  .commentIndex .breadClumn a{
    color:#508018;
    font-size: 16px;
  }
  .commentIndex .commentUl li{
    display: inline-block;
    width: 380px;
    height: 180px;
    position: relative;
    padding-top: 7px;
    background: white;
    border-top-right-radius: 12px;
    margin-right: 20px;
    vertical-align: top;
    margin-bottom: 20px;
    font-size: 0;

  }
  .commentIndex .commentUl li a{
    display: inline-block;
    width: 100%;
    height: 100%;
  }
  .commentIndex .commentUl li:before{
    position: absolute;
    content: '';
    left: 0;
    top:0;
    width: 100%;
    height: 7px;
    background: #8cc34b;
    background-position:center ;
    background-repeat: no-repeat;
    background: linear-gradient(-135deg, transparent 4px, #8cc34b 0) top right;
  }

  .commentIndex .commentUl li.yellowLine:before{
    background: #8cc34b;
  }
  .commentIndex .commentUl li .commentList{
    margin-top: 70px;
    font-size: 24px;
    color: #666666;
    text-align: center;
    vertical-align: middle;
  }

  .commentIndex .commentUl li .hoverShow{
    display: none;
    font-size: 24px;
    height: 100%;
  }
  .commentIndex  .commentUl li .hoverShow div{
    width: 33%;
    float: left;
    height: 100%;
    background: #e5e5e5;
    vertical-align: middle;
    text-align: center;
    line-height: 180px;
  }
  .commentIndex .commentUl li .hoverShow div:last-child{
    width: 34%;
  }
  .commentIndex  .commentUl li .hoverShow div a{
    color: #333;
  }
  .commentIndex .commentUl li:hover .hoverShow{
    display: block;
  }
  .commentIndex .commentUl li:hover .commentManagement{
    display: none;
  }
  .commentIndex .commentUl li div span{
    vertical-align: middle;
    font-size: 24px;
    color: #333;
  }
  .commentIndex .commentUl li .hoverShow div:hover{
    background: #f2f2f2;
  }
  .commentIndex .commentUl li div img{
    vertical-align: middle;
  }
  .commentIndex .systemHeadline{
    text-align: center;
    padding-top: 47px;
  }
  .commentIndex .logo .title{
    display: inline-block;
    font-size: 22px;
    font-weight: bold;
    color:#444444 ;
    padding-top:20px ;
  }
  @media screen and (max-width: 1400px){
    .commentIndex{
      padding: 6px;
    }
    .commentIndex .systemHeadline{
      text-align: center;
      padding-top: 17px;
    }
    .commentIndex  .breadClumn{
      padding-top:20px;
      padding-bottom: 10px;
      color: #508018;
    }
    .commentIndex .commentUl .container{
      padding: 10px 0;
    }
  }

</style>
